<template>
    <div class="container">
        <div class="content">
            <div class="star">
                <div class="name">{{wineInfo.name}}</div>
            </div>
            <img class="line" src="~@/assets/line.png" alt="line"  v-bind:style="{height:fullHeight}">
            <div class="list">
                <div class="tab horizon">
                    <span>度数</span>
                    <div class="crosswise"></div>
                    <span>{{wineInfo.degree}}°</span>
                </div>
                <div class="tab horizon">
                    <span>香型</span>
                    <div class="crosswise"></div>
                    <span>{{wineInfo.scent}}</span>
                </div>
                <div class="tab horizon">
                    <span>库存量</span>
                    <div class="crosswise"></div>
                    <span>{{wineInfo.inventory}}</span>
                </div>
                <div class="tab vertical2">
                    <span>原材料</span>
                    <span class="crosswise"></span>
                    <span>{{wineInfo.rawMaterial}}</span>
                </div>
                <div class="tab vertical">
                    <span>香体成分</span>
                    <span class="crosswise"></span>
                    <span>{{wineInfo.scentIngredient}}</span>
                </div>
				
				<div class="tab vertical">
				    <span>香型特点</span>
				    <div class="crosswise"></div>
				    <span>{{wineInfo.taste}}</span>
				</div>
                <div class="tab vertical">
                    <span>发酵工艺</span>
                    <span class="crosswise"></span>
                    <span>{{wineInfo.fermentationProcess}}</span>
                </div>
                <div class="tab vertical">
                    <span>发酵特点</span>
                    <span class="crosswise"></span>
                    <span>{{wineInfo.fermentationCharacteristics}}</span>
                </div>
                <div class="tab vertical">
                    <span>发酵期</span>
                    <span class="crosswise"></span>
                    <span>{{wineInfo.fermentationPeriod}}</span>
                </div>
                <div class="tab vertical">
                    <span>发酵温度</span>
                    <span class="crosswise"></span>
                    <span>{{wineInfo.fermentationTemperature}}</span>
                </div>

                <!--<div class="tab horizon">
                    <span>价格</span>
                    <div class="crosswise"></div>
                    <span>{{wineInfo.sellPrice}}</span>
                </div>-->

                
                

				<div class="tab vertical2" v-if="productionDate!='1970-01-01'">
                    <span>生产日期</span>
                    <span class="crosswise"></span>
                    <span>{{productionDate}}</span>
					<span class="crosswise"></span>
					<span>{{wineInfo.luna}}</span>
                </div>
                <div class="tab vertical" v-if="productionDate!='1970-01-01'">
                    <span>入库时间</span>
                    <span class="crosswise"></span>
                    <span>{{inboundDate}}</span>
                </div>
				
				<div class="tab vertical">
				    <span>产品级别</span>
				    <div class="crosswise"></div>
				    <span>{{wineInfo.productClass}}</span>
				</div>
				<div class="tab vertical">
				    <span>产地</span>
				    <div class="crosswise"></div>
				    <span>{{wineInfo.productionArea}}</span>
				</div>
                
                <!--<div class="tab vertical">
                    <span>生产执行标准</span>
                    <span class="crosswise"></span>
                    <span>{{wineInfo.productStandard}}</span>
                </div>-->
                <!--<div class="tab vertical">
                    <span>酒体配比度</span>
                    <span class="crosswise"></span>
                    <span>{{wineInfo.proportion}}</span>
                </div>-->
				<div class="tab horizon tab2" v-if="pics.length">
				    <span>酒库</span>
				    <div class="crosswise"></div>
				    <span>实景</span>
				</div>
				<div v-for="(img,i) in pics" v-bind:key="i" v-on:click="showPics">
					<van-image
					  width="11.875rem"
					  height="11.875rem"
					  fit="contain"
					  :src="img"
					/>
				</div>
				
				<div class="tab horizon tab2" v-if="pics2.length">
				    <span>酒厂</span>
				    <div class="crosswise"></div>
				    <span>实景</span>
				</div>
				<div v-for="(img,i) in pics2" v-bind:key="i + 10" v-on:click="showPics2">
					<van-image
					  width="11.875rem"
					  height="11.875rem"
					  fit="scale-down"
					  :src="img"
					/>
				</div>
				
            </div>

        </div>
    </div>
</template>

<script>
    import {format} from '../../../utils/format.js'

	import {
	    Image,
		ImagePreview
	} from 'vant'
    export default {
        name: "index",
        data() {
            return {
                wineId: "",
                wineInfo: {},
                fullHeight:document.documentElement.clientHeight,
                productionDate:"",
                inboundDate:""
            }
        },
		computed:{
			pics: function (){
				if(this.wineInfo.picture){
					return this.wineInfo.picture.split(',')
				}else {
					return []
				}
			},
			
			pics2: function (){
				if(this.wineInfo.picture2){
					return this.wineInfo.picture2.split(',')
				}else {
					return []
				}
			}
		},
        components: {
            [Image.name]: Image,
        },
        created(){
            window.addEventListener('resize', this.handleResize)
        },
        beforeDestroy: function () {
            window.removeEventListener('resize', this.handleResize)
        },
        mounted () {
            this.getWineId()
            this.index()
        },
        methods: {
            async index(){
                let {message, code, data} = await this.$api.get('/wine/' + this.wineId)
                if (code === 1 && message === 'ok') {
                    // console.log(data)
                    // console.log(this.$route.name)
                    this.wineInfo = data
					// this.productionDate = format('yyyy-MM-dd HH:mm:ss', data["productionDate"] * 1000)
                    this.productionDate = format('yyyy-MM-dd', data["productionDate"] * 1000)
                    this.inboundDate = format('yyyy-MM-dd', data["inboundDate"] * 1000)
                }
            },
            getWineId() {
                this.wineId = this.getQueryString("wineId")
            },
            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURI(r[2]);
                return null;
            },
            handleResize () {
                this.fullHeight = document.documentElement.clientWidth
                console.log(this.fullHeight)
            },
			showPics(){
				ImagePreview(this.wineInfo.picture.split(','))
			},
			showPics2(){
				ImagePreview(this.wineInfo.picture2.split(','))
			}

        }
    }
</script>

<style scoped lang="scss">
    // 1rem = 16px
    .container{
        position: relative;
        width: 100%;
        height: 100%;
        margin-bottom: 0;
        overflow: hidden;
        background-size:cover;
        background: url('~@/assets/winebg.jpg') repeat-y 0px 0px;
        background-attachment: fixed;
        .content {
            display: flex;
            flex-direction: row;
            margin-top: 50px;
            margin-bottom: 0;

            .star {
                background: url('~@/assets/star.png') no-repeat;
                background-size: cover;
                width: 135px;
                height: 150px;
                position: fixed;
                left: 0;
                // (667-150) / 2
                top: 258.5px;
                display: flex;
                align-items: center;
                justify-content: center;
                .name{
                    width:80px;
                    min-height:25px;
                    max-height:50px;
                    margin-top:15px;
                    color: #f5f2f0;
                    font-size: 16px;
                    font-weight: bolder;
                    text-align:center;
                }
            }
            .line {
                margin-left: 135px;
                width: 10px;
                // height: 100vh;
            }
            .list{
                display: flex;
                flex-direction: column;
                padding: 0 25px 0px 15px;
                .tab {
                    text-align: center;
                    margin-bottom: 40px;
                    display: flex;
                    justify-content: center;
                    border-top: 2px solid #f7b772;
                    border-bottom: 2px solid #f7b772;
                    color: #f5f2f0;
                    font-weight: 600;
                    font-size: 14px;
                    font-family: "思源黑体Medium","Microsoft YaHei UI", serif;
                }
				.tab2{
					margin-bottom: 4px;
				}
                .horizon{
                    flex-direction: row;
                    align-content: center;
                    justify-content: center;
                    .crosswise {
                        display: flex;
                        margin: 7.5px 2px;
                        line-height: 25px;
                        width: 5px;
                        height: 5px;
                        border-radius: 5px;
                        background-color: #f7b772;
                    }
                }
                .vertical{
                    width: 190px;
                    height: 50px;
                    flex-direction: column;
                    .crosswise {
                        width: 100%;
                        height: 2px;
                        background-color: #f7b772;
                    }
                }
				.vertical2{
				    width: 190px;
				    min-height: 50px;
				    flex-direction: column;
				    .crosswise {
				        width: 100%;
				        height: 2px;
				        background-color: #f7b772;
				    }
				}

            }
        }

    }
</style>
